<template>
<div style="padding:10px">
  <van-form @submit="onSubmit">
    <van-field v-if="form.personInfo.type == 1" readonly size="large" v-model="form.realname" label="真实姓名" placeholder="请输入真实姓名"
               input-align="right" required :rules="[{ required: true, message: '请输入真实姓名' }]">
    </van-field>
    <van-field v-if="form.personInfo.type == 1" readonly size="large" v-model="form.idCard" label="身份证" placeholder="请输入身份证" required
               input-align="right" required :rules="[{ required: true, message: '请输入身份证' },{validator:idCardValidator, message: '身份证号码格式错误！'}]">
    </van-field>
    <van-field label="性别" size="large" input-align="right">
      <template #input>
        <van-radio-group v-model="form.personInfo.sex" direction="horizontal" disabled>
          <van-radio :name="1">男</van-radio>
          <van-radio :name="2">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field size="large" v-model="form.phone" label="手机号码" placeholder="请输入手机号码" required type="tel"
               input-align="right" required :rules="[{ required: true, message: '请输入手机号码' },{validator:phoneValidator, message: '手机号码格式不正确！'}]">
    </van-field>
    <van-field label="区域" is-link size="large" @click="showArea()" readonly required placeholder="请选择"
               input-align="right" v-model="areaName" :rules="[{required:true, message: '请选择区域!'}]">
    </van-field>
    <van-field label="机构" is-link size="large" @click="showRegion()" readonly required placeholder="请选择"
               input-align="right"  v-model="regionName" :rules="[{required:true, message: '请选择机构!'}]">
    </van-field>
    <van-button round type="info" size="large" style="margin-top: 20px;">注册</van-button>
  </van-form>
  <van-popup v-model="showQY" position="right" :style="{ height: '100%',width:'60%' }">
    <van-cell v-for="item in areaList" :key="item.id" :value="item.areaName" @click="selectArea(item)"></van-cell>
    <div style="width: 100%;height: 50px"></div>
  </van-popup>
  <van-popup v-model="showDW" position="right" :style="{ height: '100%',width:'60%' }">
    <van-cell v-for="item in regionList" :key="item.id" :value="item.departName" @click="selectRegion(item)"/>
  </van-popup>
  <van-popup v-model="showBM" position="right" :style="{ height: '100%',width:'60%' }">
    <van-cell v-for="item in deptList" :key="item.id" :value="item.departName" @click="selectDept(item)"/>
  </van-popup>
</div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        personInfo:{
          type: 1,
          sex: 1,
          bcg:0,
          rabies:0,
        },
        avatar: ''
      },
      areaList:[],
      showQY:false,
      areaName:null,
      regionList:[],
      showDW:false,
      regionName:null,
      deptList:[],
      showBM:false,
      deptName:null,
    }
  },
  created(){
    this.form.realname = this.$route.params.name;
    this.form.idCard = this.$route.params.idCardNo;
    this.form.avatar = this.$route.params.avatarUrl;
    this.form.personInfo.sex = parseInt(this.$route.params.gender);
    this.getAreaList();
  },
  methods:{
    idCardValidator(val){
      const card15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/
      const card18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let bo = card15.test(val) || card18.test(val);
      if (bo){
        if (parseInt(val.substr(16, 1)) % 2 == 1){
          this.form.personInfo.sex = 1
        }else {
          this.form.personInfo.sex = 2
        }
      }
      return bo
    },
    phoneValidator(val){
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      return phoneReg.test(val)
    },
    password8(val){
      const str = val+"";
      var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,30}');
      if (!pwdRegex.test(str)){
        return false
      }else {
        return true
      }
    },
    getAreaList(){
      const self = this;
      this.axios.get('/sys/user/queryArea').then((res)=> {
        if(res.data.success) {
          self.areaList = res.data.result;
        }
      });
    },
    showArea:function (){
      this.showQY = true;
    },
    selectArea(item){
      this.form.personInfo.areaId = item.id;
      this.areaName = item.areaName;
      this.showQY = false;
      this.getRegionList(item.id);
    },
    getRegionList(areaId){
      const self = this;
      this.axios.get('/sys/user/queryCharity?areaId=' + areaId).then((res)=> {
        if(res.data.success) {
          self.regionList = res.data.result;
        }
      });
    },
    showRegion:function (){
      this.showDW = true;
    },
    selectRegion(item){
      this.form.personInfo.regionId = item.id;
      this.regionName = item.departName;
      this.showDW = false;
      this.getDeptList(item.id);
    },
    getDeptList(regionId){
      const self = this;
      this.axios.get('/sys/user/queryCharityById?id=' + regionId).then((res)=> {
        if(res.data.success) {
          self.deptList = res.data.result;
        }
      });
    },
    showDept:function (){
      this.showBM = true;
    },
    selectDept(item){
      this.form.personInfo.deptId = item.id;
      this.deptName = item.departName;
      this.showBM = false;
    },
    onSubmit(){
      if (this.form.personInfo.type == 1){
        this.form.username = this.form.idCard
      }
      console.log("this.form",this.form)
      this.axios.post('/sys/user/register',this.form).then((res)=> {
        if(res.data.success) {
          this.$dialog.alert({  
            title: '注册成功',
            message: "账号：" + this.form.username,
          }).then(() => {
            // history.go(0);
            this.$router.push('/scanIdCard');
          })
        } else {
          this.$toast.fail(res.data.message);
        }
      })
    }
  },
}
</script>

<style>

</style>